<!-- 用户管理页面 -->
<template>
    <el-card class="box-card">
        <CustomTable :tableConfig="tableConfig" :tableData="UserListData" :total="total" @updateQueryData="updateQueryData" @handleEdit="handleEdit" @handleDelete="handleDelete" />
    </el-card>

    <!-- 修改信息表单： -->
    <el-dialog v-model="dialogFormVisible" title="修改用户信息" width="500">
        <el-form-item label="用户ID" :label-width="formLabelWidth">
            <el-input v-model="form.userId" disabled placeholder="系统自动填充" />
        </el-form-item>

        <!-- 填写修改信息 -->
        <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.gender" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="form.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="地区" :label-width="formLabelWidth">
                <el-input v-model="form.region" autocomplete="off" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button
                    @click="
                        dialogFormVisible = false;
                        resetUpload();
                    "
                    >取消</el-button
                >
                <el-button
                    type="primary"
                    @click="
                        dialogFormVisible = false;
                        ConfirmBtn();
                    "
                    >确认</el-button
                >
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { getUsersListAPI, postUserDisableAPI, postupdateUserInfo } from "@/api/user";
import { onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import CustomTable from "./CustomTable.vue";

const tableConfig = ref([
    { prop: "username", label: "用户名" },
    { prop: "gender", label: "性别" },
    { prop: "phone", label: "电话" },
    { prop: "region", label: "地区" },
    { prop: "age", label: "年龄" },
    { prop: "email", label: "邮箱" },
    { prop: "balance", label: "余额" },
    { prop: "status", label: "状态" },
    { label: "操作", slot: true, slotName: "Slot" },
]);

// 用户列表数据
const UserListData = ref([]);
const total = ref(0);

const getUsersList = async () => {
    const res = await getUsersListAPI();
    UserListData.value = res;
    console.log(UserListData.value);
    total.value = UserListData.value.length;
};
onMounted(() => {
    getUsersList();
});

const queryParams = ref({});
// 更新查询参数，如果bool为true则调后台接口
const updateQueryData = (params, bool) => {
    queryParams.value = { ...queryParams.value, ...params };
    console.log(queryParams.value);
};

const formLabelWidth = "180px"; //输入框标题宽度
const dialogFormVisible = ref(false);
// 表单数据存储
const form = reactive({
    userId: "",
    username: "",
    gender: "",
    age: "",
    region: "",
    newPhone: "",
    newEmail: "",
    oldPassword: "",
    newPassword: "",
});

const resetUpload = () => {
    console.log("取消按钮");
    (form.userId = ""), (form.username = ""), (form.gender = ""), (form.age = ""), (form.region = ""), (form.newPhone = ""), (form.newEmail = ""), (form.oldPassword = ""), (form.newPassword = "");
};

// 编辑 - 接收user_id参数并填充表单数据
const handleEdit = (user_id, row) => {
    console.log("点击编辑，用户ID:", user_id);

    // 从表格数据中获取当前用户信息
    const user = UserListData.value.find((item) => item.user_id === user_id);
    // console.log(user)

    if (user) {
        // 打开编辑窗并填充表单
        dialogFormVisible.value = true;
        form.userId = user_id;
    }
};

// 禁用 - 接收user_id参数
const handleDelete = async (user_id) => {
    console.log("点击禁用，用户ID:", user_id);
    const res = await postUserDisableAPI(user_id);
};

// 确认按钮
const ConfirmBtn = async () => {
    console.log("表单确认按钮，表单数据：", form);

    // 过滤掉空值
    const nonEmptyForm = Object.fromEntries(Object.entries(form).filter(([key, value]) => value !== ""));
    // console.log("请求接口的数据：", nonEmptyForm);

    // 修改信息接口
    const res = await postupdateUserInfo(nonEmptyForm);
    if (res.message === "成功") {
        ElMessage.success("修改信息成功");
        getUsersList();
    } else {
        ElMessage.error("修改信息失败");
    }
};
</script>

<style scoped lang="scss"></style>
